@import 'scss-imports/cssvars';

.card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  display: flex;
  justify-content: space-between;

  h3 {
    font-size: 24px;
  }
}

.mat-mdc-card .mat-mdc-card-content > div.container {
  padding-top: 0;
}

.container {
  &.full,
  &.half {
    &::ng-deep {
      @media (max-width: $breakpoint-xs) {
        .pool-info-top .right {
          display: none;
        }

        .pool-info-bottom .item {
          min-height: 100%;
          text-align: center;
        }

        .pool-info-bottom .item .value {
          font-size: 20px;
        }
      }
    }
  }

  .pool-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;

    @media (max-width: $breakpoint-xs) {
      gap: 10px;
    }

    .pool-info-bottom {
      display: flex;
      gap: 12px;

      @media (max-width: $breakpoint-xs) {
        gap: 10px;
      }

      > * {
        display: block;
        width: 100%;
      }

      @media (max-width: $breakpoint-xs) {
        .value {
          font-size: 20px;
        }
      }
    }
  }
}
